.ui-checkbox {
  position: relative;
}

.ui-checkbox input {
  opacity: 0;
  position: absolute;
  pointer-events: none;
  left: 0;
  top: 0;
}

.ui-checkbox label {
  display: flex;
  align-items: flex-start;

  &:before {
    content: '';
    display: block;
    flex-shrink: 0;
    border-radius: 3px;
    border: 1px solid var(--grey300);
    transition: 100ms ease-in-out background-color, border-color;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: var(--white);
  }

  &:hover:before {
    background-color: var(--grey000);
    border-color: var(--grey400);
  }
}

.ui-checkbox input:disabled ~ label:hover:before {
  background-color: var(--white);
  border: 1px solid var(--grey500);
}

.ui-checkbox input:checked ~ label:before {
  background-image: url('data:image/svg+xml;charset=utf-8,<svg fill="#fff" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/></svg>');
  background-color: var(--purple500);
  border: 1px solid var(--purple500);
}

.ui-checkbox input:disabled:checked ~ label:before {
  background-image: url('data:image/svg+xml;charset=utf-8,<svg fill="#B0BAC3" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/></svg>');
  background-color: var(--grey100);
  border: 1px solid var(--grey300);
}

.ui-checkbox input:indeterminate ~ label:before {
  background-image: url('data:image/svg+xml;charset=utf-8,<?xml version="1.0" encoding="UTF-8"?><svg fill="#fff" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M19 13H5v-2h14v2z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
  background-color: var(--purple500);
  border: 1px solid var(--purple500);
}

.ui-checkbox input:not(:disabled) ~ label {
  cursor: pointer;
}

.ui-checkbox--small label:before {
  height: 12px;
  width: 12px;
}

.ui-checkbox--medium label:before {
  height: 14px;
  width: 14px;
}

.ui-checkbox--large label:before {
  height: 16px;
  width: 16px;
}

.ui-checkbox__label-group {
  display: flex;
  flex-direction: column;
  margin-left: 8px;
}

.ui-checkbox__label {
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--navy900);
  line-height: 1.6rem;
  margin-top: 2px;
}

.ui-checkbox input:disabled ~ label .ui-checkbox__label {
  color: var(--grey800);
}

.ui-checkbox__hint {
  font-size: 1.2rem;
  line-height: 1.8rem;
  font-weight: 400;
  color: var(--navy900);
  margin-top: 4px;
}

.ui-checkbox input:disabled ~ label .ui-checkbox__hint {
  color: var(--grey700);
}
